<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        *{
            margin:0;padding: 0;
            
        }
        span{
            width: 500px;
            color: red;
            font-size: 12px;
            display: block;
        }
        div{
            width: 500px;
            height: 800px;
            margin: auto;
            text-align: center;
            border: 1px solid #9999;
        }
       #user,#sjh,#mi,#mima,#yx{
            width: 300px;
            height: 20px;
           margin-top: 30px;
        }
        #yzm{
            width: 200px;
            height: 20px;
           margin-top: 30px;
        }
        #hqyzm{
            width: 100px;

            height: 20px;
           margin-top: 30px;
        }
    </style>
    <div>
        <form action="http://baidu.com">
            <h2>用户注册</h2>
            <input type="text" placeholder="请输入3~6位用户名" id="user">
            <span id="a1"></span>
            <input type="text" placeholder="请输入11位手机号" id="sjh">
            <span id="a2"></span>
            <input type="text" placeholder="请输入5位数验证码" id="yzm"><button id="hqyzm">获取验证码</button>
            <span id="a3"></span>
            <input type="text" placeholder="请输入长度为6-12个字符的密码" id="mi">
            <span id="a4"></span>
            <input type="text" placeholder="请再次输入密码" id="mima"><br>
            <span id="a5"></span>
            <input type="text" placeholder="请输入邮箱，邮箱格式,123@qq.vom" id="yx">
            <span id="a6"></span>
            <p>请选择兴趣</p>
            <input type="checkbox" name="taste">足球
            <input type="checkbox" name="taste">篮球
            <input type="checkbox" name="taste">羽毛球
            <input type="checkbox" name="taste">网球
            <p>请选择职业</p>
            <input type="radio" name="job">程序员
            <input type="radio" name="job">设计师
            <input type="radio" name="job">架构师
            <p>请选择性别</p>
            <input type="radio">男
            <input type="radio">女
            <input type="radio">其他
            <p>请选择收入</p>
            <select name="" id="">
                <option value="">1000</option>
                <option value="">2000</option>
                <option value="">3000</option>
                <option value="">4000</option>
            </select>
            <p>请选择支出</p>
            <select name="" id="">
                <option value="">1000</option>
                <option value="">2000</option>
                <option value="">3000</option>
                <option value="">4000</option>
            </select><br>
            <input type="checkbox">我已阅读并同意<br>
            <input type="submit">
            
        </div>
        </form>
        
</body>
<script>
    user.onblur= function(){
        var a  = /^[\u4e00-\u9fa5]{3,6}$/;
        if(a.test(this.value)){
            a1.innerHTML = '对'
        }else{
            a1.innerHTML = '请输入正确的用户名'
        }
    }
    sjh.onblur= function(){
        var a =/^1[2-9]\d{9}$/ 
        if(a.test(this.value)){
            a2.innerHTML = '对'
        }else{
            a2.innerHTML = '请输入正确的手机号'
        }
    }
    yzm.onblur= function(){
        var a = /^\d{5}$/
        if(a.test(this.value)){
            a3.innerHTML = '对'
        }else{
            a3.innerHTML = '请输入5位数字的验证码'
        }
    }
    mi.onblur= function(){
        var a = /^[A-za-z0-9]{6,12}$/
        if(a.test(this.value)){
            a4.innerHTML = '对'
        }else{
            a4.innerHTML = '请输入长度为6-12个字符的密码'
        }
    }
    mima.onblur = function(){

        if(mi.value == mima.value){
            a5.innerHTML = '对'
        }else{
            a5.innerHTML = '请再次输入密码'
        }
    }
    
    var hqyzm = document.getElementById('hqyzm')
    hqyzm.onclick = function(){
        var i =8
        var a =setInterval(function(){
            i--
            if(i>=0){
                hqyzm.innerHTML = i+'s'
            }
        },1000)
    }
    yx.onblur= function(){
        var a = /\d[1-9]+@qq.com$/ 
        if(a.test(this.value)){
            a6.innerHTML = '对'
        }else{
            a6.innerHTML = '请输入邮箱，邮箱格式,123@qq.vom'
        }
    }

</script>
</html>